<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>详情</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
  <div class="container">
    <section  class="top">
      <div class="img-box">
        <img src="" alt="">
      </div>
      <article>
        <canvas id="canvas"></canvas>
        <h3 class="title"></h3>
        <p class="summary">
          
        </p>
      </article>
    </section>
    <div class="nav">
      <h3>详情</h3>
      <p>DETAIL</p>
    </div>
    <div class="content">
    </div>
    <img src="./images/back.png" id="back">
  </div>
  <!-- <section class="contact">
    <h3>联系我们</h3>
    <div class="contact-box">
      <p><img src="./images/address.png" alt=""> 同仁堂地址</p>
      <p><img src="./images/web-site.png" alt="">同仁堂官网</p>
      <p><img src="./images/phone.png" alt="">&nbsp;同仁堂电话</p>
      <p><img src="./images/email.png" alt="">同仁堂邮箱</p>
    </div>
  </section> -->
  
	<script src="./js/zepto.js"></script>
  <script>
    $(function() {

      let canvas = document.getElementById('canvas');
      canvas.style.width = '80px';
      canvas.style.height = '80px';
      let ctx = canvas.getContext('2d');
      ctx.lineDashOffset = 2;
      ctx.moveTo(50, 150);

      ctx.lineTo(300, 50);
      ctx.lineStyle = '#000';
      ctx.stroke();
      ctx.font = 'italic 100px blod  黑体 ';
      ctx.fillText( 'Info', 10, 90 );
      // return;
      // console.log($('.content img'))
      var index = location.search.indexOf('=') + 1,
          id = location.search.substr(index);
  
      $.get('https://supergeek.api.likedata.cn/activity/cms/detail?categoryId=' + id, function(res) {
  
        // console.log(res)
        //如果请求成功说明是从首页进来的，如果失败则是从列表页进来的
        if (res.success) {
          $('.img-box img').attr('src', res.data[0].image)
          $('.content').html(res.data[0].description);
          $('.title').text(res.data[0].title);
          $('.summary').text(res.data[0].summary)
        } else {
          // 从列表页进来获取参数id_1(列表页对应的id), id_2(发请求需要的id)。重新发请求获取数据找到与id_1对应的一项
          let id_1 = id.split('-')[0];
          let id_2 = id.split('-')[1];
          $.get('https://supergeek.api.likedata.cn/activity/cms/detail?categoryId=' + id_2, function(res) {
            
            // console.log(res);
            if (res.success) {
              var o = res.data.find((item) => {
                return item.id == id_1;
              })
              $('.img-box img').attr('src', o.image)
              $('.content').html(o.description);
              $('.title').text(o.title);
              $('.summary').text(o.summary)
            }
          })
        }
      })
      //返回上一页面
      $('#back').on('click', function() {
        history.back();
      })
    })

  </script>
</body>
</html>